<header class="flex mb-6">
  <div class="flex gap-1 ml-auto">
    <%= link_to "Create Badge", new_admin_badge_path, class: "c-link c-link--branded c-link--block" %>
    <%= link_to "Award Badge", admin_badge_achievements_award_badges_path, class: "c-link c-link--branded c-link--block" %>
  </div>
</header>

<table class="crayons-table" width="100%">
  <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Slug</th>
      <th scope="col">Badge Image</th>
    </tr>
  </thead>
  <tbody class="crayons-card">
    <% @badges.each do |badge| %>
      <tr>
        <td><%= link_to badge.title, edit_admin_badge_path(badge.id) %></td>
        <td class="justify-center"><%= badge.slug %></td>
        <td class="justify-center">
          <img class="mx-auto mt-3" width="40" height="40" src="<%= badge.badge_image %>" alt="badge image" loading="lazy" />
        </td>
      </tr>
    <% end %>
  </tbody>
</table>
